<template>
    <div class="news-box">
        <el-table :data="lists" border style="width: 100%" @row-click="rowCli">
            <el-table-column prop="id" label="编号" align="center" width="100px" header-align="center">
            </el-table-column>

            <el-table-column prop="username" label="会员名称" align="center" header-align="center"> </el-table-column>

            <el-table-column prop="phone" label="状态" align="center" header-align="center">
                <template #default="scope">
                    <span :style="scope.row.statusStyle">{{ scope.row.statusText }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="typeText" label="类型" align="center" header-align="center"> </el-table-column>

            <el-table-column prop="money" label="金额" align="center" header-align="center"> </el-table-column>

            <el-table-column prop="createtime" label="创建时间" align="center" header-align="center"> </el-table-column>

            <el-table-column prop="beizhu" label="备注" align="center" header-align="center"> </el-table-column>

            <!-- <el-table-column label="操作" align="center" header-align="center" width="160px">
                <template #default="scope">
                    <el-icon @click.stop="editFun(scope.row)" class="lists-edit-icon">
                        <Edit />
                    </el-icon>

                    <el-icon @click.stop="deleteFun(scope.row.id)" class="lists-delete-icon">
                        <Delete />
                    </el-icon>
                </template>
            </el-table-column> -->
        </el-table>
        <div style="text-align: right; margin-top: 20px; overflow: hidden">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                @prev-click="handlePrev" @next-click="handleNext" :current-page="pageNum"
                :page-sizes="[5, 10, 20, 50, 100]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total" class="pagination">
            </el-pagination>
        </div>
    </div>
</template>
<script setup>
import { computed, onMounted, ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from "@/pinia/user"
import { getAllUserQianbaoList } from '@api/huiyuan'
import { useRoute } from 'vue-router'

const userStore = useUserStore()

const route = useRoute()

const userid = route.query.userid
const username = route.query.username

//获取列表
const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(10)

const lists = ref([])
async function getLists() {
    let searchOpt = {
        pageNo: pageNo.value,
        pageSize: pageSize.value,
        userid
    }
    let res = await getAllUserQianbaoList(searchOpt)
    lists.value = res.data

    if (res.code == 200) {
        const statusArr = ['收入', '支出']
        const statusStyleArr = [
            'color: var(--successColor)',
            'color: var(--dangerColor)'
        ]
        const typeArr = ['订单收入', '分享收入', '提现支出']
        lists.value = res.data.map(v => {
            return {
                ...v,
                username,
                statusText: statusArr[parseInt(v.status)],
                statusStyle: statusStyleArr[parseInt(v.status)],
                typeText: typeArr[parseInt(v.type)]
            }
        })
        total.value = parseInt(res.msg)
    }

}

//pageSize改变
function handleSizeChange(val) {
    pageSize.value = val
    getLists()
}

//pageNo改变
function handleCurrentChange(val) {
    pageNo.value = val
    getLists()
    // this.$store.dispatch('setpageNo', val);
}

//上一页
function handlePrev(val) {
    pageNo.value = val
    getLists()
}

//下一页
function handleNext(val) {
    pageNo.value = val
    getLists()
}

//查看详情
function rowCli(item, column) {

}

onMounted(() => {
    getLists()
})
</script>
<style lang="scss" scoped>
.news-box {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;

    .left-right-box {
        position: absolute;
        top: 172px;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;

        .left-box {
            height: 100%;
            width: 230px;
            overflow-y: auto;
            overflow-x: hidden;
            padding-top: 50px;
            box-sizing: border-box;
            border: 1px solid #ebeef5;
            position: relative;
            overflow-y: auto;
            border-radius: 4px;
            margin-right: 20px;

            .title {
                font-size: 14px;
                padding: 8px 17px;
                color: #636363;
                height: 32px;
                line-height: 32px;
                font-weight: 600;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                background: #fff;
                z-index: 999;

                .icon {
                    float: right;
                    font-size: 24px;
                    font-weight: 400;
                    cursor: pointer;
                }
            }

            .left-lists {
                font-size: 12px;
                padding: 8px 17px;
                color: #636363;
                height: 32px;
                line-height: 32px;
                cursor: pointer;
                position: relative;

                .name {
                    float: left;
                }

                .input-name {
                    width: 90px;
                    float: left;
                    padding: 0;

                    .el-input__inner {
                        padding: 0 10px;
                    }
                }

                .option {
                    float: right;
                }
            }
        }

        .left-lists.active {
            color: #4c9ff2 !important;
            background-color: #f5f5f5;
        }

        .right-box {
            flex: 1;
            overflow-y: auto;
        }
    }
}
</style>
  